// 当表单发生提交行为的时候
$("#userform").on("submit", function () {
  // 获取到用户在表单中输入发内容并将内容格式化成参数字符串
  var formData = $(this).serialize();

  // 向服务器发送添加用户的请求
  $.ajax({
    type: "post",
    url: "/users",
    data: formData,
    success: function () {
      // 刷新页面
      location.reload();
    },
    error: function () {
      alert("添加用户失败");
    },
  });

  // 阻止表单的默认提交行为
  return false;
});

// 当用户选择文件的时候
$("#modifyBox").on("change", "#avatar", function () {
  // 用户选择到的文件
  var formDta = new FormData();
  formData.append("avatar", this.filels[0]);

  $.ajax({
    method: "post",
    url: "/upload",
    data: formData,
    processData: false,
    contentType: false,
    success: function (response) {
      console.log(response);
      // 实现头像预览功能
      $("#preview").attr("src", response[0].avatar);
      $("hiddenAvatar").val(response[0].avatar);
    },
  });
});

// 向服务器发送请求，索要用户列表数据
$.ajax({
  method: "get",
  url: "/users",
  success: function (response) {
    console.log(response);
    // 使用模板引擎将数据和HTML字符串进行拼接
    var html = template("useTpl", { data: response });
    // 将拼接好的字符串显示在页面中
    $("userBox").html(html);
  },
});

// 通过事件委托的方式为编辑按钮添加点击事件
$("userbox").on("click", ".edit", function () {
  // 获取被点击用户的id值
  var id = $(this).attr("data-id");
  // 根据id获取用户的详细信息
  $.ajax({
    method: "get",
    url: "/users/" + id,
    success: function (response) {
      console.log(response);
      var html = template("modifyTpl", response);
      $("#modifyBox").html(html);
    },
  });
});

// 为修改表单添加表单提交事件
$("#modifyBox").on("submit", "modifyForm", function () {
  // 获取用户在表单中输入的内容
  var formData = $(this).serialize();
  // 获取要修改的那个用户的id值
  var id = $(this).attr("data-id");
  //   发送请求修改用户信息
  $.ajax({
    method: "put",
    url: "/users/" + id,
    data: formData,
    success: function (response) {
      location.reload();
    },
  });

  // 阻止表单默认提交
  return false;
});

// 当删除按钮被点击时
$("#userBox").on("click", ".delete", function () {
  // 如果管理员确认要删除用户
  if (confirm("您真的要删除用户嘛")) {
    // 获取到即将要删除的用户id
    var id = $(this).attr("data-id");
  }
});
